<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		*{ margin: 0; padding: 0; }
		body{ background: #f2f2f2; }
		.navList{
			list-style: none;
			display: block;
			width: 200px;
			position: relative;
			top: 100px;
			left: 100px;
			padding: 60px 0 60px 0;
			background: url(images/shad2.png) no-repeat;
			background-size: 50% 100%;
		}
		.navList li {
			margin: 5px 0 0 0;
		}
		.navList li a {
			transition: all 0.3s ease-out;
			background: #cbcbcb url(images/border.png) no-repeat;
			color: #174867;
			padding: 7px 15px 7px 15px;
			border-top-right-radius: 10px;
		 	border-bottom-right-radius: 10px;
			width: 100px;
			display: block;
			text-decoration: none;
			box-shadow: 2px 2px 4px #888;
		}

		.navList li a:hover {
			background: #ebebeb url(images/border.png) no-repeat;
			color: #67a5cd;
			padding: 7px 15px 7px 30px;
		}


	</style>
</head>
<body>
	<div>
		<ul class="navList">
			<li><a href="javascript:">11111</a></li>
			<li><a href="javascript:">11111</a></li>
			<li><a href="javascript:">11111</a></li>
			<li><a href="javascript:">11111</a></li>
			<li><a href="javascript:">11111</a></li>
			<li><a href="javascript:">11111</a></li>
			<li><a href="javascript:">11111</a></li>
		</ul>
	</div>
</body>
</html>